/*
 * @Title: 旅游宾馆-相册
 * @Created by: ycq 
 */
<template>
	<view>
		<comHeader :config="navConfig"/>
		<!-- <view class="back">
			<image src="/static/fanhui-black.png" @click="back()" mode=""></image>
		</view> -->
		<view v-if="block">
			<view class="firstPic">首页图册</view>
			<view class="header">
				<image class="header-bg" src="/static/banner.png" mode=""></image>
				<view class="play" @click="toRoomPos"></view>
				<view class="header-bottom"></view>
			</view>
			<view class="secondPic">分图册</view>
		</view>
		<view v-if="room">
			<view class="twotitle">
				<view class="video">视频</view>
				<view class="p360">全景图</view>
			</view>
			<view class="twoPic">
				<view class="header">
					<image class="header-bg" src="/static/banner.png" mode=""></image>
					<view class="play" @click="toRoomPos"></view>
					<view class="header-bottom"></view>
				</view>
				<view class="pic360">
					<image src="../../../static/testglPic3.png" mode=""></image>
				</view>
			</view>
			<view class="twophoto">图片</view>
		</view>
		<Photo :photoConfig='pConfig' :showBigPhoto="showBigPhoto" :bigImg="bigImg"/>
	</view>
</template>

<script>
	import Photo from '@/components/Photos.vue'
	export default{
		components:{
			Photo
		},
		data(){
			return{
				block:true,
				room:false,
				clickNumb:1,//点击图片次数
				navConfig:{
					comScroll:0,
					isFixed: false, //是否absolute布局
					left: {
					
						isShowLeft: true,
						leftGobackColor: 'black', //左边返回icon颜色
					},
					mid: {
						isShowMid: true,
						text: '',
						textColor: '#000',
						isShowIco:false,
						ico:'',
						icoColor:'#000'
						
					},
					right: {
						text: '',
						textColor: '',
						isShowRight: false,
						ico: '', //右侧图标地址
						isShowRightIco: false //是否显示右侧图标
					},
					
					},
				pConfig:{
					photoType:1,
					photoData:[],
				},
				showBigPhoto:false,
				bigImg:'',
				lv1Data:[
					{
						title:'大厅',
						img:"../../../static/myPic/binguan.png",
						next:true,
						num:1
					},
					{
						title:'房间',
						img:"../../../static/myPic/binguan.png",
						next:true,
						num:7
					},
					{
						title:'前台',
						img:"../../../static/myPic/binguan.png",
						next:true,
						num:2
					},
					{
						title:'停车场',
						img:"../../../static/myPic/binguan.png",
						next:true,
						num:3
					}
				],
				lv2Data:[
					{
						title:'商务房（有窗）',
						img:"../../../static/myPic/binguan.png",
						next:false,
					},
					{
						title:'双人床房（部分有窗）',
						img:"../../../static/myPic/binguan.png",
						next:false,
					},
					{
						title:'大床房（部分有窗）',
						img:"../../../static/myPic/binguan.png",
						next:false,
					},
					{
						title:'主题房间',
						img:"../../../static/myPic/binguan.png",
						next:false,
					},
					{
						title:'主题房（有窗）',
						img:"../../../static/myPic/binguan.png",
						next:false,
					},
					{
						title:'双人床房（部分有窗）',
						img:"../../../static/myPic/binguan.png",
						next:false,
					},
					{
						title:'大床房（部分有窗）',
						img:"../../../static/myPic/binguan.png",
						next:false,
					}
				],
				// lv3Data:[
				// 	{img:"../../../static/myPic/binguan.png"},
				// 	{img:"../../../static/myPic/binguan.png"},
				// 	{img:"../../../static/myPic/binguan.png"},
				// 	{img:"../../../static/myPic/binguan.png"},
				// 	{img:"../../../static/myPic/binguan.png"},
				// 	{img:"../../../static/myPic/binguan.png"},
				// 	{img:"../../../static/myPic/binguan.png"},
				// ] 
			}
		},
		onShow(){
			this.clickNumb = 1
		},
		// let app = new Vue({
		//     el: "#app",
		//     data: {
		//         block: true
		//     }
		// })
		methods:{
			// getPhoteTit(data){
			// 	this.hotelTit = data
			// 	console.log(data);
			// },
			// 
			change(index,itemImg){
				this.clickNumb++;
				if(this.clickNumb>0){
					this.block=false
					this.room=true
				}
				console.log(this.clickNumb);
				if(this.pConfig.photoData[index].next){
					// 头部title文字
					this.navConfig.mid.text = this.pConfig.photoData[index].title	
					
					this.pConfig.photoType = 2;
					this.pConfig.photoData = this.lv2Data;
					
				}else{
					
					this.bigImg = itemImg
					
					this.showBigPhoto = !this.showBigPhoto
					// uni.previewImage({
					// 	urls:[itemImg],
					// 	indicator:"number",
					// 	longPressActions:{
					// 		itemList:['发送给朋友','保存图片'],
					// 		success:function(data){
					// 			console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					// 		},
					// 		fail:function(err){
					// 			console.log(err.errMsg);
					// 		}
					// 	}
					// })
				}
				// if(this.clickNumb > 2){
					// 点击图片查看大图
					
				// }
				
				// else{
				// 	this.pConfig.photoType = 3;
				// 	this.pConfig.photoData = this.lv3Data;
				// }
			},
			back(){
				if(this.pConfig.photoType != 1){
					this.pConfig.photoType = 1;
					this.pConfig.photoData = this.lv1Data;
					
				}else{
					uni.navigateBack({
						delta:1
					})
				}
			}
			
		},
		created() {
			this.pConfig.photoType = 1;
			this.pConfig.photoData = this.lv1Data;
			// 默认头部title文字
			this.navConfig.mid.text = '宾馆图册'	
		},
		
	}
</script>

<style scoped>
	.back{
		width: 750upx;
		height: 36upx;
		margin-top: 60upx;
	}
	.back image{
		width: 36upx;
		height: 42upx;
		margin-left: 24upx;
	}
	.firstPic{
		margin-left: 30upx;
		margin-top: 155upx;
		font-size: 32upx;
	}
	.secondPic{
		margin-left: 30upx;
		margin-bottom: -117upx;
		margin-top: 5upx;
		font-size: 32upx;
	}
	/* 头部视频 */
	.header{
		width: 750upx;
		height: 300upx;
		position: relative;
	}
	.header-bg{
		width: 334upx;
		height: 238upx;
		margin-left: 26upx;
		margin-top: 26upx;
		border-radius: 15upx;
		position: absolute;
	}
	.back{
		width: 60upx;
		height: 60upx;
		top: 60upx;
		left: 26upx;
		position: absolute;
	}
	.back image{
		width: 30upx;
		height: 36upx;
	}
	.play{
		position: absolute;
		top:118upx;
		left:170upx;
		width:0;
		height:0;
		border-top:35.5upx solid transparent;
		border-bottom:35.5upx solid transparent;
		border-left:63upx solid #FFFFFF;
	}
	.p-num{
		width: 125upx;
		height: 58upx;
		top: 183upx;
		right: 0;
		position: absolute;
		background: rgba(0,0,0,0.5);
		border-radius: 30upx 0 0 30upx;
		position: absolute;
	}
	.p-num image{
		width: 26upx;
		height: 26upx;
		margin-left:36upx;
		margin-top: 17upx;
		float: left;
	}
	.VR-img{
		width: 92upx !important;
		height: 32upx !important;
		margin-left:20upx !important;
		margin-top: 13upx !important;
	}
	.p-num text{
		color: #FFFFFF;
		font-size: 24upx;
		line-height: 58upx;
		float: left;
		margin-left: 16upx;
	}
	.header-bottom{
		width: 750upx;
		height: 30upx;
		bottom: 0upx;
		/* border-radius: 30upx 30upx 0 0; */
		background: #FFFFFF;
		position: absolute;
	}
	/*商务房页面*/
	.twotitle{
		display: flex;
		flex-direction: row;/*控制方向 --*/
		justify-content: space-between; /*对齐方式*/
	}
	.video{
		margin-left: 30upx;
		margin-top: 155upx;
		font-size: 32upx;
	}
	.p360{
		margin-right: 269upx;
		margin-top: 155upx;
		font-size: 32upx;
	}
	.twoPic{
		display: flex;
		flex-direction: row;/*控制方向 --*/
		justify-content: space-between; /*对齐方式*/
	}
	.pic360 image{
		width: 334upx;
		height: 238upx;
		margin-right: 26upx;
		margin-top: 26upx;
		border-radius: 15upx;
		/* position: absolute; */
	}
	.twophoto{
		margin-left: 30upx;
		margin-bottom: -117upx;
		margin-top: 5upx;
		font-size: 32upx;
	}
</style>
